<template>
	<div class="baseLeft">
		<div class="top">
			<img src="../../image/farm.jpg" alt="" />
			<div class="box">
				<div class="mes">
					<div>
						新塘边镇茶叶产业园共富体项目是乡村振兴示范工程，总投资3200万元，规划建设2100亩生态茶园、2000㎡智能化茶厂及农旅融合园。项目依托当地优越的自然条件（年均温17℃、红壤土质）和政策红利（浙江共同富裕示范区建设），通过"种植+加工+文旅"三产融合模式，预计年产值达2310万元，带动6个村集体增收。建成后将提供50个固定岗位及2000个季节性岗位，村民年增收超2000元，同时形成茶文旅生态闭环——茶园采用水肥一体化智能管理，配套茶文化体验馆与研学基地，打造类似安吉白茶的网红打卡地，实现经济、社会、生态效益三重提升。
					</div>
				</div>
			</div>
		</div>
		<box class="bottom" code="hjjc" @getLocation="toLocation">
			<div class="environment-box flex">
				<div class="environment-item flex" v-for="(item, index) of envirList" :key="index">
					<img :src="`/src/views/largeScreen/image/envir${index + 1}.png`" alt="" />
					<div class="item-right">
						<div class="p1Color">
							<span class="font16">{{ item.value }}</span
							><span class="font14">{{ item.unit }}</span>
						</div>
						<div class="item-name font12">{{ item.name }}</div>
					</div>
				</div>
			</div>
			<envirChart :leftCode="leftCode"></envirChart>
		</box>
	</div>
</template>
    
<script setup lang='ts'>
import { getLast } from '/@/api/largeScreen/baseView';
const emit = defineEmits(['toMarkerLocation']);
import { ref, reactive } from 'vue';
const box = defineAsyncComponent(() => import('./box.vue'));
const envirChart = defineAsyncComponent(() => import('./envirChart.vue'));
const props = defineProps({
	leftCode: {
		type: Array,
		default: [],
	},
});
const envirList = ref();

const toLocation = (data: any) => {
	emit('toMarkerLocation', '环境监测设备');
};

onMounted(() => {
	setTimeout(() => {
		getLast({ deviceCode: props.leftCode[0] }).then((res) => {
			let data = res.data;
			envirList.value = [
				{
					name: '空气温度',
					value: data.tempValue,
					unit: '℃',
				},
				{
					name: '空气湿度',
					value: data.humidityValue,
					unit: 'RH',
				},
				{
					name: '光照',
					value: data.conductivity,
					unit: 'Lux',
				},
				{
					name: '风速',
					value: data.windSpeed,
					unit: 'm/s',
				},
				{
					name: '风向',
					value: data.windDirection,
					unit: '',
				},
				{
					name: '雨量',
					value: data.rainfall,
					unit: 'mm',
				},
				{
					name: '大气压',
					value: data.airPressure,
					unit: 'hpa',
				},
				{
					name: 'CO2',
					value: data.co2,
					unit: 'ppmv',
				},
			];
		});
	}, 1000);
});
</script>
<style lang='less' scoped>
@import url('../../styles/selectStyle');
@import url('../../styles/scrollbar');
.baseLeft {
	width: 388px;
	overflow: hidden;
	.top {
		width: 388px;
		height: 328px;
		background: rgba(0, 0, 0, 0.6);
		border-radius: 2px;
		padding: 12px;
		box-sizing: border-box;
		> img {
			width: 100%;
		}
		.box {
			display: flex;
			flex-direction: column;
			background: rgba(0, 58, 104, 0.7);
			font-family: PingFang SC;
			font-weight: 500;
			width: 100%;
			height: 85px;
			font-size: 12px;
			color: #c9ffff;
			line-height: 20px;
			overflow-x: hidden;
			.mes {
				flex: 1;
				overflow-y: auto;
				padding: 0 11px 0 9px;
				margin-bottom: 15px;
				margin-top: 13px;
				font-family: PingFang SC;
				font-weight: 500;
				font-size: 12px;
				color: #c9ffff;
				line-height: 20px;
				> div {
					text-indent: 2em;
				}
			}
		}
	}
	.bottom {
		width: 388px;
		height: 554px;
		background: rgba(0, 0, 0, 0.6);
		border-radius: 2px;
		margin-top: 12px;
		box-sizing: border-box;
		.environment-box {
			padding: 12px;
			flex-wrap: wrap;
			margin-top: 18px;
			.environment-item {
				width: 110px;
				position: relative;
				height: 38px;
				margin-bottom: 28px;
				margin-right: 17px;
				> img {
					width: 38px;
					height: 38px;
					margin-right: 7px;
				}
				.item-right {
					color: #fff;
					margin-top: -5px;
				}

				.item-name {
					margin-top: -3px;
				}

				&:after {
					content: '';
					position: absolute;
					left: 45px;
					bottom: 0;
					width: 100px;
					height: 1px;
					background: url(../../image/envir_bg.png) no-repeat;
				}
				&:nth-child(3n) {
					margin-right: 0;
				}
			}
		}
	}
}
.flex {
	display: flex;
}

.p1Color {
	color: #2dd5ff;
}

.font16 {
	font-size: 16px;
	margin-right: 5px;
	font-family: DIN;
	font-weight: bold;
	font-size: 16px;
	color: #2dd5ff;
}

.font12 {
	font-size: 12px;
}

.font14 {
	font-size: 14px;
}
</style>